import React from "react";
import '../style/components/index-current-weather.scss'

import iconFeelLike from '../assets/imgs/index/noun-rain.png'
import iconHumidity from '../assets/imgs/index/noun-humidity.png'
import iconWind from '../assets/imgs/index/noun-wind.png'

const IndexCurrentWeather = ({ weather,onOpenDetail, isLoading, isError }) => {
  return (
    <div className="current">
      <div className="current-box">
        <img className="current-logo" src={weather.weatherIcon}  />
        <div className="current-location">杭州市，浙江省</div>
        <div className="current-content">
          <div className="current-weather">
            <div className="current-weather__temperature">
              {weather.temperature}<span>&#8451; </span>
            </div>
            <div className="current-weather__date">
              {weather.currentWeek}，
              {weather.currentHour}
            </div>
          </div>
          <div className="current-tip">{weather.description}</div>
        </div>
        <div
          className='current-btn'
          onClick={onOpenDetail}
        >
          详情
        </div>
      </div>
      <div className="current-info">
        <div className="current-info-item">
          <img className="current-info-item__icon" src={iconFeelLike} /> 
          <div className="current-info-item__txt">体感</div> 
          <div className="current-info-item__val"> {weather.feels_like}&#8451;</div> 
        </div>
        <div className="current-info-item">
          <img className="current-info-item__icon" src={iconHumidity} /> 
          <div className="current-info-item__txt">湿度</div> 
          <div className="current-info-item__val"> {weather.humidity}<span>% </span></div> 
        </div>
        <div className="current-info-item">
          <img className="current-info-item__icon" src={iconWind} /> 
          <div className="current-info-item__txt">风速</div> 
          <div className="current-info-item__val"> {weather.wind_speed}<span>km/h</span></div> 
        </div>
      </div>
    </div>
  );
};

export default IndexCurrentWeather;
